<template>
  <div class="richTextArea">
    <!-- 预览控制区 -->
    <!-- <div class="previewStyle" :style="{ marginTop: formData.marginTop/2 + 'px',marginBottom: formData.marginBottom/2 + 'px',height:formData.space +'px'}"> -->
    <div v-html="formData.text" class="previewStyle" :style="{ marginTop: formData.marginTop/2 + 'px',marginBottom: formData.marginBottom/2 + 'px',height:formData.space*4 + 'px'}">
    </div>
    <!-- 编辑工作区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">富文本</div>
          <el-tabs v-model="tabActive" tab-position="top">
            <el-tab-pane label="内容设置" name="0">
              <el-form label-position="top" size="mini" :model="formData" label-width="80px">
                <el-form-item label="文本内容">
                  <Tinymce :key="key" v-model="formData.text" type="goods" :height="300" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">
                  组件样式
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="block">
                <span>框体高度</span>
                <el-slider v-model.number="formData.space" input-size="mini" :show-tooltip="false"></el-slider>
                <el-input size="mini" v-model.number="formData.space" >
                  <template  slot="append">像素</template>
                </el-input>
              </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>
